<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米账号登录</title>
    <style>
       *{
        margin: 0;
        padding: 0;
       }
       a{
        text-decoration: none;
       }
       .middle{
        position: relative;
        height: 588px;
        margin: auto;
       }
       .mi-logo{
        /* 设置背景颜色、插入图片、图片不重复、图片居中 */
        background: #ff5b00 url(use/mi-logo.png) no-repeat center center;
            width: 50px;
            height: 50px;
            /* 图标边角的圆弧度 */
            border-radius: 5%;
            margin: auto;
       }
       .title{
        margin-top: 20px;
        text-align: center;
       }
       .uname,.pwd{
        width: 330px;
        height: 50px;
        border: 1px #e6e6e6 solid;
        margin-top: 15px;
        padding-left: 20px;
       }
       .input{
        margin-top: 30px;
        text-align: center;
       }
       button{
        width: 356px;
        height: 50px;
        background-color: #ff5b00;
        color: white;
        margin-top: 20px;
        border: none;
       }
    </style>
</head>
<body>
     <div class="middle">
        <div class="mi-logo"><img src="作业素材/mi-logo.png" alt=""></div>
        <div class="title">
            <h1>小米账号登录</h1>
        </div>
        <div class="input">
            <input type="text" placeholder="邮箱/手机号码/小米ID" class="uname"><br>
            <input type="password" placeholder="密码" class="pwd"><br>
            <button>登录</button>
        </div>
        
        
     </div>
</body>
</html>